<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../VUE/min.Vue"></script>
<body>
    <!-- 
        data与el的两种写法
            el的两种写法
                    (1) new Vue()的时候配置el属性
                    (2) 先创建Vue实例，随后通过  实例.$mount('#root')指定el的值
            
            data的两种写法
                    (1) 对象式
                    (2) 函数式   ！必须使用函数式

            注意：由Vue管理的函数，一定不要写箭头函数


     -->


     <div id="root">
         <h4>你好,{{name}}</h4>
     </div>
</body>
</html>
<script>
    
    // new Vue({
    //     el:'#root',
    //     data:{
    //         name:'世界'
    //     }
    // })




    let v = new Vue({
    // 定义了一个函数，作为data键的键值存在，返回值是一个对象，也就是说data键的值s
    // 这个函数中返回的对象
    // data:function(){
    //     return{
    //             name:'世界'
    //         }
    // }
    
        data(){
            return{
                name:'世界'
            }
        }
        // 这是上面的简化写法
    })


    v.$mount('#root')
</script>